/*
 * @Descripttion: 
 * @Author: voanit
 * @Date: 2022-06-02 11:32:13
 * @LastEditors: voanit
 * @LastEditTime: 2022-06-11 16:29:29
 */
import Icon from '@/components/Icon/Icon'
import { ApiResponse, Channel } from '@/types/data'
import styles from './index.module.scss'
import { Tabs, Popup } from 'antd-mobile'
import { useInitialState } from '@/hooks/useInitialState'
import { getUserChannel, changeActive, getAllChannel } from '@/store/actions/channel'
import { useDispatch } from 'react-redux'
import Channels from './components/Channels/Channels'
import { useState } from 'react'
import { useHistory } from 'react-router-dom'
import ArticleList from './components/ArticelList/ArticelList'
const Home = () => {
  // 控制状态
  const [visible, setVisible] = useState(false)
  const { userChannels, activeIndex } = useInitialState(getUserChannel, 'channel')

  /* 获取所有的频道 */
  useInitialState(getAllChannel, 'channel')
  /* 获取所有的频道 */
  // console.log(userChannels, 99);

  const dispatch = useDispatch()

  const onChange = (id: string) => {
    // console.log(id, 88);

    // 更改activeIndex
    dispatch(changeActive(id))
  }

  /* 弹出层 */
  const show = () => {
    setVisible(true)
  }
  const hide = () => {
    setVisible(false)
  }
  // console.log(1111) 

  const history = useHistory()
  return (
    <div className={styles.root}>
      {/* 频道 Tabs 列表 */}

      <div className="tabs-opration">
        <Icon type="iconbtn_search" onClick={() => history.push('/search')} />
        <Icon type="iconbtn_channel" onClick={show} />
      </div>
      <Tabs className="tabs" activeLineMode="fixed" activeKey={activeIndex} onChange={onChange} >
        {

          userChannels.length > 1 && userChannels.map((item: Channel) => (
            <Tabs.Tab title={item.name} key={item.id} forceRender>
              {/* 在每个 Tabs.TabPane 中渲染文章列表组件 */}

              <ArticleList channelId={Number(activeIndex)} />
            </Tabs.Tab>
          ))
        }
      </Tabs>


      {/* 从左边过来 */}
      <Popup destroyOnClose position="left" visible={visible}>
        <Channels hide={hide} />
      </Popup>
    </div>
  )
}

export default Home